{include file=comm/head.html}

<link rel="stylesheet" href="{pboot:sitetplpath}/css/animate.css">

<script type="text/javascript" src="{pboot:sitetplpath}/js/wow.min.js"></script>

<script>new WOW().init();</script>

     <!-- banner -->

     <div class="banner wow fadeIn" data-wow-duration="1.5s">

          <div class="my_swiper jlswiper">

               <div class="swiper-container index_container">

                    <div class="swiper-wrapper">



                        {pboot:slide gid=1 num=3}

                         <div class="swiper-slide">

                              <img src="[slide:src]" />

                              <div class="jlswiperText">

                                   <h1>[slide:title]</h1>

                                   <h2>[slide:subtitle]</h2>

                              </div>



                         </div>

                         {/pboot:slide}  



                    </div>

                    <div class="swiper-pagination"></div>

               </div>

          </div>



     </div>





     <!-- 产品 -->

     <div class="index_product container">

          <ul class="index_service wow fadeInUp" data-wow-duration="1.5s">

               <li>

                    {pboot:sort scode=5}

                    <a>
                         <img src="{pboot:sitetplpath}/img/chanp.png" alt="">
                         <h4>PRODUCT</h4>
                         <P>{label:index_desc1}</P>
                    </a>

                    {/pboot:sort}

               </li>

               <li>

                    {pboot:sort scode=9}
                    <a>
                         <img src="{pboot:sitetplpath}/img/chanp2.png" alt="">
                         <h4>ABILITY</h4>
                         <P>{label:index_desc2}</P>
                    </a>
                    {/pboot:sort}

               </li>

               <li>

                    {pboot:sort scode=9}
                    <a>
                         <img src="{pboot:sitetplpath}/img/chanp3.png" alt="">
                         <h4>SERVICE</h4>
                         <P>{label:index_desc3}</P>
                    </a>
                    {/pboot:sort}

               </li>

          </ul>



          <!-- 介绍产品 -->

          <div class="recommend_product" >

               <div class="index_nav">

                    <h4>Recommended products</h4>

                    <ul class="jlrecom_ul">

                

                         <li class="active_nav">

                            {pboot:sort scode=7}

                               <a>[sort:name]</a>

                            {/pboot:sort}

                          </li>

                         <li>

                            {pboot:sort scode=6}

                               <a>[sort:name]</a>

                            {/pboot:sort}

                         </li>

                    </ul>

               </div>

               <!-- 产品展示 -->

               <div class="jlindexproSwiper jlindexproxianshi">

               

                    <div class="swiper-container  product_show">

                         <div class="swiper-wrapper">



                         {pboot:list scode=7 num=16 isrecommend=1}

                              <div class="swiper-slide">

                              <a href="[list:link]">

                                   <h4>[list:title len=18]</h4>

                                   <img src="[list:ico]" alt="">

                                   <p>View detail</p>

                              </a>   

                              </div>

                         {/pboot:list}   

                              

                         </div>

                         <!-- Add Pagination -->

                         <div class="swiper-pagination"></div>

                         <!-- Add Arrows -->

                         <div class="swiper-button-next swiper-button-next1"></div>

                         <div class="swiper-button-prev swiper-button-prev1"></div>

                    </div>

               </div>     



               <!-- 新添加产品滚动 -->

               <div class="jlindexproSwiper">

               

                    <div class="swiper-container  product_show22">

                         <div class="swiper-wrapper">



                         {pboot:list scode=6 num=16 isrecommend=1}

                              <div class="swiper-slide">

                              <a href="[list:link]">

                                   <h4>[list:title len=18]</h4>

                                   <img src="[list:ico]" alt="">

                                   <p>View detail</p>

                              </a>   

                              </div>

                         {/pboot:list}   

                              

                         </div>

                         <!-- Add Pagination -->

                         <div class="swiper-pagination"></div>

                         <!-- Add Arrows -->

                         <div class="swiper-button-next swiper-button-next22"></div>

                         <div class="swiper-button-prev swiper-button-prev22"></div>

                    </div>

               </div>     

               <!-- 新添加产品滚动end -->



          </div>

     </div>

     <!-- about -->

     <div class="index_about">

          <div class="container">

               <h1 class="h1  wow fadeInDown" data-wow-duration="1.5s">ABOUT US</h1>

               <p class="  wow fadeInUp" data-wow-duration="1.5s">

                    {pboot:content id=1}

                          [content:description]

                    {/pboot:content}

               </p>



               {pboot:sort scode=1}

               <a href="[sort:link]" class=" wow fadeInUp" data-wow-duration="1.5s">Explore</a>

               {/pboot:sort} 



          </div>

     </div>

     <!-- new -->

     <div class="index_new container">

          <h1 class="h1  wow fadeInDown" data-wow-duration="1.5s">NEWS</h1>



          <div class="indexnew">

               <div class="inexnew_left  wow fadeInLeft" data-wow-duration="1.5s">

 

                    {pboot:list scode=2 num=1 isrecommend=1}

                    <a href="[list:link]">



                      <img src="[list:ico]" alt="">

                      <div class="mask">

                          <p>

                                [list:title]

                          </p>

                      </div>

                    </a>  

                    {/pboot:list}



               </div>



               <ul class="indexnew_righ  wow fadeInRight" data-wow-duration="1.5s">



                    {pboot:list scode=2 num=3 istop=1}    

                    <li>

                         <div class="left">

                              <p>[list:date style=Y-m]</p>

                              <p>[list:date style=d]</p>

                         </div>

                         <a href="[list:link]" style="display: block; color: #222;   width: 77%;">

                              <div class="right">



                                   <div class="indexnew_txt">

                                        <p>[list:title]</p>

                                        <p>[list:ext_jianshu]</p>

                                   </div>

                                   <span class="indexdetails">View details </span>



                              </div>

                         </a>

                    </li>

                    {/pboot:list}



               </ul>

          </div>

     </div>



     <!-- hotline -->

     <div class="index_contact ">

          <div class="container ">

               <p class="wow fadeInUp" data-wow-duration="1.5s">

                  {label:hotlinedec}

               </p>

               <div class="right wow fadeInUp" data-wow-duration="1.5s">

                    <div class="index_link">

                         <h4>HOTLINE</h4>

                         <P>{pboot:companyphone}</P>

                    </div>

                    <img class="index_link_img" src="{pboot:sitetplpath}/img/dianhua.png" alt="">

               </div>

          </div>

     </div>



     <!-- contact -->

     <div class="index_contact_way container">

          <h1 class="h1 wow fadeInUp" data-wow-duration="1.5s">CONTACT</h1>



          <div class="main">

               <div class="left wow fadeInLeft" data-wow-duration="1.5s">

                    <h1>Reach out to us with any question or comment.</h1>

                    <div class="index_way">

                         <p><img src="{pboot:sitetplpath}/img/lianxi1.png" alt=""> {pboot:companyname}</p>

                         <p><img src="{pboot:sitetplpath}/img/lianxi2.png" alt=""> <span>Add:</span>{pboot:companyaddress}</p>

                         <p><img src="{pboot:sitetplpath}/img/lianxi3.png" alt=""> <span>Tel:</span>{pboot:companyphone}</p>

                         <p><img src="{pboot:sitetplpath}/img/lianxi4.png" alt=""> <span>E-mail:</span>{pboot:companyemail}</p>

                    </div>

               </div>

               <div class="form wow fadeInRight" data-wow-duration="1.5s">



                    <div class="xiala">

                         <img src="{pboot:sitetplpath}/img/xiala.png" />

                   </div>

                <form action="{pboot:msgaction}"  method="post">

                    　<select name="city">

                         <option value="" selected disabled style="display: none;">SELECT CATEGORIES</option>

                                {pboot:nav num=15 parent=5}
                                  　<option value="[nav:name]">[nav:name]</option>
                                {/pboot:nav}

                         　　　<span><img src="{pboot:sitetplpath}/img/xiala.png" alt=""></span>

                    </select>

                    <input type="text" placeholder="YOUR NAME" name="contacts">

                    <input type="text" placeholder="EMAIL" name="email">

                    <textarea name="content" placeholder="MESSAGE" cols="30" rows="3"></textarea>

                    <div class="index_btn">

                         <button class="index_on" type="submit">SEND MESSAGE</button>

                         <button type="reset">RESET INFORMATION</button>

                    </div>

                </form>





               </div>

          </div>



     </div>





{include file=comm/foot.html}

<script>

     var mySwiper = new Swiper('.index_container', {

          loop: true, // 循环模式选项

          observer: true,

          observeParents: false,

          autoplay: {

               delay: 3000,

               stopOnLastSlide: false,

               disableOnInteraction: false,

          },

          effect: 'left',

          pagination: {

               el: '.swiper-pagination',

               clickable: true,

          },

          navigation: {

               nextEl: '.swiper-button-next',

               prevEl: '.swiper-button-prev',

          },

     })



     



$(function(){

     $('.jlrecom_ul li').click(function(){

          _initProSwiper2();

          var index = $(this).index();

          $(this).addClass('active_nav');

          $(this).siblings().removeClass('active_nav');

          $('.recommend_product .jlindexproSwiper').eq(index).addClass('jlindexproxianshi');

          $('.recommend_product .jlindexproSwiper').eq(index).siblings().removeClass('jlindexproxianshi')

          

     })

     _initProSwiper();

     function _initProSwiper(){

          // 产品展示

          if ($(window).width() <= 540) {

               var swiper = new Swiper('.product_show', {

                    slidesPerView: 2,

                    spaceBetween: 20,

                    slidesPerGroup: 2,

                    loop: true,

                    loopFillGroupWithBlank: true,



                    navigation: {

                         nextEl: '.swiper-button-next1',

                         prevEl: '.swiper-button-prev1',

                    },

               });

              

          } else {

               var swiper = new Swiper('.product_show', {

                    slidesPerView: 4,

                    spaceBetween: 20,

                    slidesPerGroup: 4,

                    loop: true,

                    loopFillGroupWithBlank: true,



                    navigation: {

                         nextEl: '.swiper-button-next1',

                         prevEl: '.swiper-button-prev1',

                    },

               });

             

          }

     }

     function _initProSwiper2(){

          // 产品展示

          if ($(window).width() <= 540) {

               var swiper22 = new Swiper('.product_show22', {

                    slidesPerView: 2,

                    spaceBetween: 20,

                    slidesPerGroup: 2,

                    loop: true,

                    loopFillGroupWithBlank: true,



                    navigation: {

                         nextEl: '.swiper-button-next22',

                         prevEl: '.swiper-button-prev22',

                    },

               });

          } else {

               var swiper22 = new Swiper('.product_show22', {

                    slidesPerView: 4,

                    spaceBetween: 20,

                    slidesPerGroup: 4,

                    loop: true,

                    loopFillGroupWithBlank: true,



                    navigation: {

                         nextEl: '.swiper-button-next22',

                         prevEl: '.swiper-button-prev22',

                    },

               });

          }

     }

     

})

</script>

<style>

     html,

     body {

          position: relative;

          height: 100%;

     }





     .swiper-container {

          width: 100%;

          height: 100%;

     }



     .swiper-slide {

          text-align: center;

          font-size: 18px;

          background: #fff;



          /* Center slide text vertically */

          display: -webkit-box;

          display: -ms-flexbox;

          display: -webkit-flex;

          display: flex;

          -webkit-box-pack: center;

          -ms-flex-pack: center;

          -webkit-justify-content: center;

          justify-content: center;

          -webkit-box-align: center;

          -ms-flex-align: center;

          -webkit-align-items: center;

          align-items: center;

     }

     @media (min-width: 541px) and (max-width: 1599px) {
          
     }
     @media (min-width: 541px){
          .index_contact_way .index_way p {
               margin-bottom: 36px;
          }
          .index_contact_way .left h1 {
               margin-bottom: 38px;
          }
     }
     
</style>

